<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/dom.js"></script>
        <link rel="stylesheet" type="text/css" href="styles/common.css">
    </head>
    <body>

        <label for="tagsEdit">Tags:</label>
        <div class="tagBlock form-input" onclick="dom('#inputVisible').elements[0].focus();">
            <div class="tags"></div>
            <input type="hidden" name="tags" id="inputHidden">
            <input type="text" onkeyup="return tagging(event);" name="tagsEdit" id="inputVisible">
        </div>

        <script>

        function trim(_string) {
            return _string.replace(/^\s+|\s+$/g, '');
        }

        var inputVisible = dom('#inputVisible').elements[0];
        var inputHidden = dom('#inputHidden').elements[0];
        var val;
        inputVisible.value = '';
        inputHidden.value = '';

        function tagging(event) {
            if ((event.keyCode == 32) || (event.keyCode == 13)) {
                inputHidden.value = trim(inputHidden.value + ' ' + inputVisible.value);
                var arrHidden = inputHidden.value.split(' ');
                val = dom('.tags').createElement('span');
                val.innerHTML = arrHidden[arrHidden.length - 1] + '<a onclick="deleteTag(this);">close</a>';
                inputVisible.value = '';
            }
        }

        function deleteTag(a) {
            var span = a.parentNode;
            var parent = span.parentNode;
            for (var i = 0; i < parent.childNodes.length; i++) {
                if (parent.childNodes[i] === span) {
                    index= i;
                }
            }
            var arrHidden = inputHidden.value.split(' ');
            arrHidden.splice(index, 1);
            dom('.tags').html('');
            for (var i = 0; i < arrHidden.length; i++) {
                val = dom('.tags').createElement('span');
                val.innerHTML = arrHidden[i] + '<a onclick="deleteTag(this);">close</a>';
            }
            inputHidden.value = arrHidden.join(' ');
        }

        </script>

    </body>

</html>